

import { useReactive } from './reactive.js'
import useDom from './render.js'

function App() {

    const state = useReactive({
        count: 0,
        mount: 5
    })   

    const add =(num)=>{             
        console.log(state.count)
        state.count +=  num
      
       
    }
    const minus = (num)=>{
        state.count -= num 
        
        console.log(state.count)
    }

    return ({
        template: `<h2>{{count}}</h2>        
        <button onClick='add("1")'> + </button>
        <button onClick='minus("1")'> - </button>`,
        state,
        methods:{
            add,
            minus
        },       

    })
}

useDom(App(),document.querySelector('#app'))




// const state = useReactive({
//     name: 'ccs',
//     age: 18,
//     info: {
//         job: 'teacher',
//         students: [
//             {
//                 id: 1,
//                 name: 'zhangXiao'
//             },
//             {
//                 id: 2,
//                 name: 'liXiao'
//             }
//         ]
//     },
//     hobby: ['singel', 'travel', 'girls']
// })



// state.newname='ccs1111ccs'
// console.log(state.newname)
// state.info.job = 'professor'
// console.log(state.info.job)
// state.info.students.push({id:3,name:'zhaoXiao'})
// console.log(state.info.students)
